<template>
  <div class="gi_table_page">
    <GiTable
      title="门店每日收益"
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #toolbar-left>
        <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['generator:order:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
    </GiTable>
  </div>
</template>

<script setup lang="ts">
import type { TableInstance } from '@arco-design/web-vue'
import { type OrderQuery, exportOrder, listOrder } from '@/apis/cakerun/orderShop'
import { useDownload, useTable } from '@/hooks'
import {listAllBrand} from "@/apis/cakerun/brandAccount";
import type {ColumnItem} from "@/components/GiForm";
import {listAllShop} from "@/apis/cakerun/shopInfo";

defineOptions({ name: 'Order' })

const queryForm = reactive<OrderQuery>({
  sort: ['id,desc'],
})

const brandInfo = ref<any[]>([])
const shopInfos = ref<any[]>([])
const getBrandInfos = () => {
  listAllBrand({ enable: true }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.brand, value: item.id })
    })
    brandInfo.value = items
  })
}
const getShops = () => {
  listAllShop({ enable: true, accountId: queryForm.accountId }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.poiName, value: item.id })
    })
    shopInfos.value = items
  })
}
getBrandInfos()
const queryFormColumns: ColumnItem[] = reactive([
  {
    type: 'select',
    label: '品牌',
    field: 'accountId',
    span: { xs: 24, sm: 8, xxl: 8 },
    props: {
      options: brandInfo,
      placeholder: '请选择品牌',
      multiple: true,
      onChange: (value) => {
        getShops()
      },
    },
  },
  {
    type: 'select',
    label: '门店',
    field: 'shopId',
    span: { xs: 24, sm: 8, xxl: 8 },
    props: {
      options: shopInfos,
      placeholder: '请选择门店',
      multiple: true,
    },
  },
  {
    type: 'range-picker',
    label: '业务时间',
    field: 'businessTime',
    span: { xs: 24, sm: 8, xxl: 8 },
    props: {
      showTime: false,
      format: 'YYYY-MM-DD',
    },
  },
])

const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listOrder({ ...queryForm, ...page }), { immediate: true })
const columns: TableInstance['columns'] = [
  { title: '品牌', dataIndex: 'accountName', slotName: 'accountName' },
  { title: '名称', dataIndex: 'name', slotName: 'name', width: 230 },
  { title: '店铺', dataIndex: 'shopName', slotName: 'shopName' },
  { title: '交易次数', dataIndex: 'cnt', slotName: 'cnt' },
  { title: '实际支付金额', dataIndex: 'realPayed', slotName: 'realPayed' },
  { title: '业务成本', dataIndex: 'bizCost', slotName: 'bizCost' },
  { title: '服务费用', dataIndex: 'service', slotName: 'service' },
  { title: '应付款金额', dataIndex: 'due', slotName: 'due' },
  { title: '合作伙伴自配送费用', dataIndex: 'partnerSelfDeliverFee', slotName: 'partnerSelfDeliverFee' },
  { title: '业务时间', dataIndex: 'businessTime', slotName: 'businessTime' },
]

// 重置
const reset = () => {
  search()
}

// 导出
const onExport = () => {
  useDownload(() => exportOrder(queryForm))
}
</script>

<style scoped lang="scss"></style>
